import React, { useEffect, useState, useMemo } from "react";
import { createForm } from "rc-form";
import { List, InputItem, Toast } from "antd-mobile";
import "./index.scss";
import TelIcon from "@/images/icon/tel.png";
import { openContactUI, getContacts } from "@/tools/native/navigate.js";
import { calData, hasRunLoop } from "./cal";
const pattern = {
	phone: /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/,
	userName: /^[\u4e00-\u9fa5]{2,12}$/
};
const fieldPropsMap = {
	contactPhone: {
		rules: [
			{
				required: true,
				message: "请输入正确的手机号",
				pattern: pattern.phone
			}
		]
	},
	contactName: {
		rules: [
			{
				required: true,
				message: "姓名格式不正确",
				pattern: pattern.userName
			}
		]
	}
};
let userContactsVariableDto = {};
const Form = props => {
	const { form, values, index = "1", linkmanArr, getValuesFn } = props;
	const { getFieldProps, getFieldError, validateFields, setFieldsValue } = form;
	const [selectItem, setSelectItem] = useState("");
	const selectItemObj = useMemo(() => ({}), []);
	const idObj = useMemo(() => ({}), []);
	useEffect(() => {
		if (values.contactsInfoDtoList) {
			const data = values.contactsInfoDtoList[index - 1] || {};
			setFieldsValue(data);
			let selectItem = data.contactType;
			if (!data.contactType) {
				// 如果不存在，就用默认值
				selectItem = index == "1" ? "02" : "03";
			}
			setSelectItem(selectItem);
			selectItemObj.value = selectItem;
			idObj.id = data.id;
		} else {
			let selectItem = index == "1" ? "02" : "03";
			setSelectItem(selectItem);
			selectItemObj.value = selectItem;
		}
	}, [values]);

	const onErrorClick = name => {
		const message = getFieldError(name).join("、");
		Toast.fail(message);
	};

	const getValue = () => {
		return new Promise((reslove, reject) => {
			validateFields((err, values) => {
				if (err) {
					reject(err);
				} else {
					values.contactType = selectItemObj.value;
					values.userContactsVariableDto = userContactsVariableDto;
					values.id = idObj.id;
					reslove(values);
				}
			});
		});
	};

	const onExtraClick = () => {
		getContacts().then(res => {
			if (res.status === "1000") {
				openContactUI().then(res => {
					if (res.status === "1000") {
						const data = res.data;
						setFieldsValue({
							contactName: data.name,
							contactPhone: data.phone[0].replace(/\s*/g, "")
						});
					}
				});
				if (!hasRunLoop) {
					const data = calData(res.data);
					const {
						contactRelativeCnt,
						contactCollectionCnt,
						contactLoaninfoCnt,
						contactCounterfeitCnt
					} = data;
					userContactsVariableDto.contactCnt = res.data.length;
					userContactsVariableDto.contactRelativeCnt = contactRelativeCnt;
					userContactsVariableDto.contactCollectionCnt = contactCollectionCnt;
					userContactsVariableDto.contactLoaninfoCnt = contactLoaninfoCnt;
					userContactsVariableDto.contactCounterfeitCnt = contactCounterfeitCnt;
				}
			}
		});
	};
	useEffect(() => {
		getValuesFn(getValue);
	}, []);
	return (
		<div className="form-linkman-wrapper">
			<h1 className="form-linkman-title">常用联系人{index}</h1>
			<List>
				<List.Item className="form-linkman-relation-list">
					<div className="form-linkman-relation-wrapper">
						联系人关系
						<div className="form-linkman-relation">
							{linkmanArr.map(item => (
								<a
									className={item.value === selectItem ? "active" : null}
									key={item.value}
									onClick={() => {
										setSelectItem(item.value);
										selectItemObj.value = item.value;
									}}
								>
									{item.label}
								</a>
							))}
						</div>
					</div>
				</List.Item>
				<InputItem
					error={getFieldError("contactName")}
					onErrorClick={() => onErrorClick("contactName")}
					placeholder="请填写真实姓名"
					extra={<img src={TelIcon} />}
					onExtraClick={onExtraClick}
					{...getFieldProps("contactName", fieldPropsMap.contactName)}
				>
					姓名
				</InputItem>
				<InputItem
					{...getFieldProps("contactPhone", fieldPropsMap.contactPhone)}
					error={getFieldError("contactPhone")}
					onErrorClick={() => onErrorClick("contactPhone")}
					placeholder="请输入联系人手机号"
				>
					手机号
				</InputItem>
			</List>
		</div>
	);
};
export default createForm()(Form);
